<template>
  <div class="aside" style="height: 100%; width: 100%;">
    <el-row class="tac" style="height: 100%; width: 100%;">
      <el-col :span="24" style="height: 100%; width: 100%;">
        <el-menu
          default-active="this.$route.path"
          router
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#2980b9"
          text-color="#fff"
          active-text-color="#ffd04b"
          style="height: calc(100%) ; width: 100%;">
          <el-menu-item index="/DataSets">
            <template #title>
              <el-icon><Grid /></el-icon> <!-- grid图标 -->
              <span>数据集</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/TreeList">
            <template #title>
              <el-icon><OfficeBuilding /></el-icon>
              <span>决策模型列表</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/TreeDetail">
            <template #title>
              <el-icon><View /></el-icon> <!-- 使用View图标 -->
              <span>决策模型详情</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/VisualizationOfData">
            <template #title>
              <el-icon><View /></el-icon> 
              <span>数据可视化</span>
            </template>
          </el-menu-item>
          <el-sub-menu index="personal">
            <template #title>
              <el-icon><User /></el-icon> 
              <span>我的</span>
            </template>
            <el-menu-item index="/infoCus">资料编辑</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { View } from '@element-plus/icons';
import { defineComponent } from 'vue';
// import your icons here

export default defineComponent({
    // components: {
    // Define your icons components here
    // },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
    },
    components: { View }
});
</script>

<style>
.aside {
  background-color: #4A90E2; /* 更深一点的灰蓝色 */
  border-right: 1px solid #D6D6D6; /* 细腻的淡灰色分割线 */
}
</style>